<script setup lang="ts">
const userStore = useUserStore();

const user = computed(() => userStore.user)

const toLogin = () => {
  handerLogin();
}

const toLogout = () => {
  userStore.logOut()
}
</script>

<template>
  <view class="app-container">
    <view class="user-box">
      <view class="user-avatar">
        <image src="/static/image/profile/avatar.jpg" v-if="user" />
        <image src="/static/image/profile/user-avatar.jpg" v-else />
      </view>
      <view class="user-info" v-if="user">
        <view class="user-name">
          {{ user.nickName }}
        </view>
        <view class="user-phone">
          {{ user.phonenumber }}
        </view>
      </view>

      <view class="user-info" v-else>
        <view class="user-name" @click="toLogin">
          去登陆
        </view>
      </view>
      <view class="user-logou" v-if="user">
        <button @click="toLogout">
          退出登陆
        </button>
      </view>
    </view>

  </view>
</template>

<style scoped lang="scss">
.user-box {
  display: flex;
  align-items: center;
  padding: 50rpx 25rpx;

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    margin: 0 25rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .user-info {
    height: 80rpx;

    .user-name {
      font-weight: bold;
    }

    .user-phone {
      font-size: 12px;
      margin-top: 20rpx;
    }
  }

  .user-logou {
    margin: 0 25rpx 0 auto;

    button {
      width: 130rpx;
      font-size: 12px;
      border-radius: 25rpx;
      background-color: #e5e5e5;
      padding: 0;
      height: 50rpx;
      line-height: 50rpx;
    }
  }

}
</style>